<template>
  <div>
    <el-dialog title="邮件发送" :visible.sync="dialogFormVisible">
      <!-- 这里的收件人做的比较简单 你们也可以像支付模块那样 写个单独的接口进行搜索 同时必须传递正确的ID 后台是没有验证是否具有这个用户的... -->
      <el-form :model="form">
        <el-form-item label="收件人ID" label-width="120px">
          <el-input
            v-model="form.toId"
            placeholder="请填写ID"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题" label-width="120px">
          <el-input
            v-model="form.postmanTitle"
            placeholder="请填写标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" label-width="120px">
          <el-input
            type="textarea"
            v-model="form.postmanContent"
            placeholder="请输入内容"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sendEmail">发送</el-button>
      </div>
    </el-dialog>
    <el-row>
      <el-col :span="24">
        <el-button @click="dialogFormVisible = true"> 发邮件 </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <big>新邮件({{ newPosts || 0 }})</big>
      </el-col>
      <el-col>
        <div style="height: 10px"></div>
        <el-collapse accordion>
          <el-collapse-item v-for="item in posts" :key="item._id">
            <template slot="title">
              <b v-if="item.readSatus === 0"
                >{{ item.postmanTitle }} <el-tag type="warning">未读</el-tag
                ><el-tag style="margin-left: 10px" @click="readMark(item._id)">
                  标记为已读
                </el-tag>
              </b>
              <span v-else> {{ item.postmanTitle }} </span>
            </template>
            <div>
              {{ item.postmanContent }}
            </div>
            <br>
            <div>
               <small>发件人： {{ item.from }}</small>
                <br>
               <small>发件人ID： {{ item.fromId }}</small>
               <br>
               <small>发件人身份：{{ item.fromRole }}</small>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState,mapActions } from "vuex";

import { useUpdatePostmanStatus, useAddPostmanApi } from "@/hooks/postman";
import { nanoid } from 'nanoid';

export default {
  name: "Postman",
  data() {
    return {
      newPosts: 0,
      postsList: [],
      dialogFormVisible: false,
      form: {
        postmanNo: nanoid(),
        postmanTitle: "",
        postmanContent:"",
        postmanDate:"",
        toId:"",
        fromId:"",
        from:"",
        fromRole:"",
      },
    };
  },
  mounted() {
    this.newPosts = this.posts?.reduce((prev, cur) => {
      if (cur.readSatus === 0) {
        return ++prev;
      } else {
        return prev;
      }
    }, 0);
  },
  computed: {
    ...mapState("posts", ["posts"]),
    ...mapState("user",["userInfo"])
  },
  methods: {
    ...mapActions("posts",["setPosts"]),
    async readMark(id) {
      const resInfo = await useUpdatePostmanStatus(id);
      if (resInfo.code === 201 && resInfo.message === "success") {
        this.$message.success("修改成功!");
        location.reload();
      }
    },
    async sendEmail() {
      const h = this.$createElement;
      if (this.form.toId.length === 0 || this.form.postmanTitle.length === 0 || this.form.postmanContent.length === 0) {
        this.$notify({
          title: "错误提示",
          message: h(
            "i",
            { style: "color: red" },
            " 收件人或者发送的内容已以及标题都不能为空，请重新输入 "
          ),
        });
      } else {
        this.dialogFormVisible = false;
        this.form.fromId = this.userInfo._id;
        this.form.from = this.userInfo.studentName || this.userInfo.teacherName || this.userInfo.name || this.userInfo.deanName
        this.form.postmanDate = new Date().getTime();
        this.form.fromRole = this.userInfo.role;
        this.posts.unshift(this.form);
        this.setPosts(this.posts);
        const resInfo = (await useAddPostmanApi(this.form)); 
        if(resInfo.code === 201 && resInfo.message === 'success'){
             this.$message.success("发送成功")
        } else{
          this.$message.success(resInfo.message)
        }
        this.form.postmanNo = nanoid(); 
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
